<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>“妙文生花”</title>
    <!-- 引入外部资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/OBJLoader.js"></script>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f7fa;
            padding: 20px;
        }

        /* 导航区样式 */
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            text-align: center;
        }

        .nav-title {
            color: #2c3e50;
            margin-bottom: 60px;
            font-size: 2.5rem;
            background: linear-gradient(90deg, #3498db, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .function-container {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 40px;
            margin: 0 auto;
            max-width: 1200px;
        }

        .function-item {
            position: relative;
            width: 100%;
            max-width: 280px;
            cursor: pointer;
        }

        .function-item:hover {
            transform: translateY(-10px) scale(1.03);
            transition: all 0.3s ease;
        }

        .function-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .function-item:hover .function-card {
            box-shadow: 0 15px 30px rgba(52, 152, 219, 0.15);
        }

        .function-img-container {
            position: relative;
            height: 180px;
            overflow: hidden;
        }

        .function-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .function-item:hover .function-img {
            transform: scale(1.1);
        }

        .function-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, 
                rgba(0,0,0,0) 0%, 
                rgba(0,0,0,0.2) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .function-item:hover .function-overlay {
            opacity: 1;
        }

        .function-name {
            padding: 20px 15px 10px;
            color: #34495e;
            font-size: 18px;
            font-weight: 500;
            transition: color 0.3s ease;
            text-align: center;
        }

        .function-item:hover .function-name {
            color: #3498db;
        }

        .function-desc {
            font-size: 14px;
            color: #7f8c8d;
            padding: 0 15px 20px;
            line-height: 1.5;
            text-align: center;
            margin: 0;
        }

        .arrow {
            font-size: 3rem;
            color: #3498db;
            opacity: 0.7;
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
            align-self: center;
        }

        .arrow:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        /* 文生图功能区样式 */
        .text2img-container {
            display: none;
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            animation: fadeIn 0.5s ease;
        }

        /* 3D模型查看器功能区 */
        .model-viewer-container {
            display: none;
            max-width: 1400px;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.5s ease;
        }

        .ceshi-header {
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ceshi-header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #ff8a00, #e52e71);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .ceshi-subtitle {
            font-size: 1.1rem;
            opacity: 0.8;
            color: white;
        }
        
        .ceshi-content {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 180px);
        }
        
        @media (min-width: 992px) {
            .ceshi-content {
                flex-direction: row;
            }
        }
        
        .ceshi-sidebar {
            width: 100%;
            background: rgba(20, 20, 30, 0.8);
            padding: 20px;
            overflow-y: auto;
        }
        
        @media (min-width: 992px) {
            .ceshi-sidebar {
                width: 300px;
                min-width: 300px;
            }
        }
        
        .ceshi-viewer-container {
            flex: 1;
            position: relative;
            background: #000;
        }
        
        #ceshi-model-viewer {
            width: 100%;
            height: 100%;
        }
        
        .ceshi-controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            gap: 10px;
            z-index: 10;
        }
        
        .ceshi-control-btn {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .ceshi-control-btn:hover {
            background: rgba(50, 50, 150, 0.7);
            transform: scale(1.1);
        }
        
        .ceshi-folder-selector {
            margin-bottom: 20px;
        }
        
        .ceshi-folder-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }
        
        .ceshi-folder-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .ceshi-image-upload {
            margin-bottom: 20px;
        }
        
        .ceshi-image-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background: linear-gradient(90deg, #ff8a00, #e52e71);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }
        
        .ceshi-image-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .ceshi-model-list {
            margin-top: 20px;
        }
        
        .ceshi-model-item {
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
        }
        
        .ceshi-model-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(5px);
        }
        
        .ceshi-model-item.active {
            background: rgba(74, 144, 226, 0.5);
            border-left: 4px solid #4a90e2;
        }
        
        .ceshi-model-icon {
            margin-right: 10px;
            font-size: 1.5rem;
        }
        
        .ceshi-model-info {
            flex: 1;
        }
        
        .ceshi-model-name {
            font-weight: bold;
            margin-bottom: 5px;
            color: white;
        }
        
        .ceshi-model-type {
            font-size: 0.8rem;
            opacity: 0.7;
            color: white;
        }
        
        .ceshi-loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .ceshi-spinner {
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 5px solid #4a90e2;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .ceshi-no-models {
            text-align: center;
            padding: 20px;
            opacity: 0.7;
            color: white;
        }
        
        .ceshi-info-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 8px;
            max-width: 300px;
            display: none;
            color: white;
            z-index: 10;
        }
        
        .ceshi-info-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #4a90e2;
        }
        
        .ceshi-close-info {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 1.2rem;
        }
        
        .ceshi-footer {
            padding: 15px;
            text-align: center;
            background: rgba(0, 0, 0, 0.5);
            font-size: 0.9rem;
            opacity: 0.7;
            color: white;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .text2img-title {
            color: #2c3e50;
            font-size: 24px;
            margin-bottom: 20px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            position: relative;
            display: inline-block;
        }

        .text2img-title:hover::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #2980b9;
            transition: width 0.3s ease;
            width: 100%;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-top: 1rem;
        }
        .gallery-img {
            width: 100%;
            height: 256px;
            object-fit: contain;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .btn-primary {
            background-color: #3498db;
            border-color: #3498db;
        }
        .btn-primary:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }
        .btn-secondary {
            background-color: #95a5a6;
            color: white;
            border-color: #95a5a6;
        }
        .btn-secondary:hover {
            background-color: #7f8c8d;
            border-color: #7f8c8d;
        }
        .slider-group {
            margin-bottom: 1.5rem;
        }
        .text-muted {
            color: #7f8c8d !important;
        }

        .loading {
            display: none;
            border: 5px solid rgba(52, 152, 219, 0.1);
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        .back-btn {
            margin-top: 20px;
            background-color: #95a5a6;
            border-color: #95a5a6;
            color: white;
        }
        
        .back-btn:hover {
            background-color: #7f8c8d;
            border-color: #7f8c8d;
            color: white;
        }

        /* 语义分割结果页面样式 */
        .segmentation-container {
            display: none;
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            animation: fadeIn 0.5s ease;
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        
        .images-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }
        
        .image-card {
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 320px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .image-card:hover {
            transform: scale(1.05);
        }
        
        .seg-image {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }

        /* 新增：图片详情页样式 */
        .image-detail-container {
            display: none;
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            animation: fadeIn 0.5s ease;
            text-align: center;
        }
        
        .detail-image-container {
            margin: 30px auto;
            max-width: 800px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
        }
        
        .detail-image {
            max-width: 100%;
            height: auto;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            border-radius: 5px;
        }

        /* Yuyi页面样式 */
        .yuyi-container {
            display: none;
            max-width: 1400px;
            margin: 0 auto;
            padding: 30px;
            animation: fadeIn 0.5s ease;
        }

        /* 图片上传预览样式 */
        #image-preview-container {
            margin-top: 15px;
            display: none;
        }
        
        #uploaded-image-preview {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        @media (max-width: 992px) {
            .function-container {
                flex-direction: column;
                gap: 30px;
                align-items: center;
            }
            
            .arrow {
                transform: rotate(90deg);
                margin: 10px 0;
            }

            .function-item {
                max-width: 320px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航区（默认显示） -->
    <div class="nav-container" id="navArea">
        <h1 class="nav-title">“妙文生花”</h1>
        <div class="function-container">
            <!-- 文生图图片按钮 -->
            <div class="function-item" onclick="showText2Img()">
                <div class="function-card">
                    <div class="function-img-container">
                        <img src="文生图需求.png" class="function-img" alt="文生图">
                        <div class="function-overlay"></div>
                    </div>
                    <p class="function-name">文生图</p>
                    <p class="function-desc">以 “用户输入” 为起点，分为两条并行分支 —— 一条是文本分支，依次经 “文本处理”“CLIP 编码”；另一条是边缘图分支，依次经 “边缘图输入”“Canny 检测”“边缘提取”。两条分支的结果共同输入 “Janus-Pro 生成” 环节，再经 “权重融合”“后处理”，最终实现 “输出展示”。</p>
                </div>
            </div>

            <div class="arrow">
                <i class="fa fa-long-arrow-right"></i>
            </div>

            <!-- 图生3D功能 -->
            <div class="function-item" onclick="showModelViewer()">
                <div class="function-card">
                    <div class="function-img-container">
                        <img src="生成图生 3D 主题图片.png" class="function-img" alt="图生3D">
                        <div class="function-overlay"></div>
                    </div>
                    <p class="function-name">图生3D</p>
                    <p class="function-desc">以 “输入层” 为起始点，先进入 “图像预处理层” 对输入内容开展前期处理；随后传递至 “3D 形状生成层” 以生成 3D 形状相关结果；接着经由 “模型后处理层” 对生成的 3D 模型进行后续优化等操作；最终通过 “输出层” 完成结果的输出。</p>
                </div>
            </div>

            <div class="arrow">
                <i class="fa fa-long-arrow-right"></i>
            </div>

            <!-- 语义分割功能 -->
            <div class="function-item" onclick="showSemanticSegmentation()">
                <div class="function-card">
                    <div class="function-img-container">
                        <img src="语义分割.png" class="function-img" alt="语义分割">
                        <div class="function-overlay"></div>
                    </div>
                    <p class="function-name">语义分割</p>
                    <p class="function-desc">以 “输入层” 接收优化后的 3D 网格模型为起点，进入 “特征提取层” 渲染多视角 2D 图像；随后通过 “分割执行层” 采用二维映射分割方案（基于 SAM、CLIPSeg 模型）完成部件拆分；再经 “后处理层” 修正分割边界、统一语义标签；最终通过 “输出展示层” 借助 Three.js 实现分割结果的交互式展示。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 文生图功能区 -->
    <div class="text2img-container" id="text2ImgArea">
        <h2 class="text2img-title">文生图功能（带Canny边缘控制）</h2>
        
        <div class="text2img-content">
            <p class="text-muted">提示：使用清晰详细的提示语可以获得更好的生成结果！Canny边缘图像可用于控制生成图像的轮廓。</p>

            <!-- 生成状态 -->
            <div class="mb-3">
                <label class="form-label">生成状态</label>
                <input type="text" id="statusMsg" class="form-control" value="就绪" disabled>
            </div>

            <!-- 第一行滑块：CFG权重 + 温度参数 -->
            <div class="row slider-group">
                <div class="col-md-6">
                    <label class="form-label">CFG权重</label>
                    <input type="range" id="cfgWeight" class="form-range" min="1" max="20" step="0.5" value="5">
                    <div class="text-end text-sm text-muted" id="cfgWeightValue">当前值：5.0</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">温度参数</label>
                    <input type="range" id="temperature" class="form-range" min="0.01" max="2.0" step="0.05" value="1.0">
                    <div class="text-end text-sm text-muted" id="temperatureValue">当前值：1.0</div>
                </div>
            </div>

            <!-- 第二行滑块：Canny低阈值 + Canny高阈值 -->
            <div class="row slider-group">
                <div class="col-md-6">
                    <label class="form-label">Canny低阈值</label>
                    <input type="range" id="cannyLow" class="form-range" min="1" max="255" step="1" value="100">
                    <div class="text-end text-sm text-muted" id="cannyLowValue">当前值：100</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Canny高阈值</label>
                    <input type="range" id="cannyHigh" class="form-range" min="1" max="255" step="1" value="200">
                    <div class="text-end text-sm text-muted" id="cannyHighValue">当前值：200</div>
                </div>
            </div>

            <!-- 第三行：Canny图像上传 + 提示语文本框 -->
            <div class="row slider-group">
                <div class="col-md-4">
                    <label class="form-label">Canny控制图像（可选）</label>
                    <div class="card">
                        <div class="card-body text-center p-3" style="height: 180px; display: flex; align-items: center; justify-content: center;">
                            <img id="cannyPreview" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23dee2e6' viewBox='0 0 16 16'%3E%3Cpath d='M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z'/%3E%3C/svg%3E" 
                                class="img-fluid" alt="Canny图像预览">
                        </div>
                        <div class="card-footer p-2">
                            <input type="file" id="cannyImageInput" class="form-control form-control-sm" accept="image/*" onchange="previewCannyImage(event)">
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <label class="form-label">提示语</label>
                    <textarea id="promptInput" class="form-control" rows="3" placeholder="输入详细的图像描述..."></textarea>
                </div>
            </div>

            <!-- 第四行：随机种子 + 并行生成数量 -->
            <div class="row slider-group">
                <div class="col-md-4">
                    <label class="form-label">随机种子（可选）</label>
                    <input type="number" id="seedInput" class="form-control" placeholder="输入整数（留空则随机）" min="0">
                </div>
                <div class="col-md-8">
                    <label class="form-label">并行生成数量</label>
                    <input type="range" id="parallelSize" class="form-range" min="1" max="4" step="1" value="2">
                    <div class="text-end text-sm text-muted" id="parallelSizeValue">当前值：2</div>
                </div>
            </div>

            <!-- 按钮组：生成 + 清除 + 保存 -->
            <div class="row slider-group">
                <div class="col-md-4">
                    <button id="generateBtn" class="btn btn-primary w-100" onclick="generateImages()">生成图像</button>
                </div>
                <div class="col-md-4">
                    <button id="clearBtn" class="btn btn-secondary w-100" onclick="clearInputs()">清除输入</button>
                </div>
                <div class="col-md-4">
                    <button id="saveBtn" class="btn btn-secondary w-100" onclick="saveAllImages()">保存所有图像</button>
                </div>
            </div>

            <!-- 生成结果画廊 -->
            <div class="slider-group">
                <label class="form-label">生成结果</label>
                <div id="imageGallery" class="gallery">
                    <!-- 生成的图片将通过JS动态插入 -->
                </div>
            </div>

            <div class="loading" id="loadingIndicator"></div>
            
            <button class="back-btn btn btn-secondary" onclick="showNav()">返回工具导航</button>
        </div>
    </div>

    <!-- 3D模型查看器功能区 -->
    <div class="model-viewer-container" id="modelViewerArea">
        <header class="ceshi-header">
            <h1>图生3D模型展示</h1>
            <p class="ceshi-subtitle">上传图片生成3D模型，或选择包含3D模型的文件夹查看</p>
        </header>
        
        <div class="ceshi-content">
            <div class="ceshi-sidebar">
                <div class="ceshi-folder-selector">
                    <button class="ceshi-folder-btn" id="folder-btn">选择3D模型文件夹</button>
                    <input type="file" id="folder-input" webkitdirectory directory multiple style="display: none;">
                </div>
                
                <div class="ceshi-image-upload">
                    <button class="ceshi-image-btn" id="image-upload-btn">上传图片生成3D模型</button>
                    <input type="file" id="image-upload-input" accept="image/*" style="display: none;">
                    
                    <!-- 图片预览区域 -->
                    <div id="image-preview-container">
                        <img id="uploaded-image-preview" src="" alt="上传图片预览">
                        <button id="generate-3d-btn" class="ceshi-folder-btn" style="background: linear-gradient(90deg, #2ecc71, #27ae60);">
                            生成3D模型
                        </button>
                    </div>
                </div>
                
                <div class="ceshi-loading" id="loading">
                    <div class="ceshi-spinner"></div>
                    <p id="loading-text">扫描文件夹中...</p>
                </div>
                
                <div class="ceshi-model-list" id="model-list">
                    <div class="ceshi-no-models" id="no-models">
                        请上传图片生成3D模型或选择模型文件夹
                    </div>
                </div>
            </div>
            
            <div class="ceshi-viewer-container">
                <div id="ceshi-model-viewer"></div>
                
                <div class="ceshi-controls">
                    <button class="ceshi-control-btn" id="reset-view" title="重置视图">↺</button>
                    <button class="ceshi-control-btn" id="toggle-rotate" title="自动旋转">⟳</button>
                    <button class="ceshi-control-btn" id="model-info" title="模型信息">ℹ</button>
                </div>
                
                <div class="ceshi-info-panel" id="info-panel">
                    <button class="ceshi-close-info" id="close-info">×</button>
                    <div class="ceshi-info-title">模型信息</div>
                    <div id="model-details">
                        选择模型查看详细信息
                    </div>
                </div>
            </div>
        </div>
        
        <footer class="ceshi-footer">
            <p>支持格式: OBJ, GLTF, GLB | 使用Three.js渲染引擎</p>
        </footer>
        
        <button class="back-btn btn btn-secondary" style="margin: 20px auto; display: block;" onclick="showNav()">返回工具导航</button>
    </div>

    <!-- 语义分割结果展示区 -->
    <div class="segmentation-container" id="segmentationArea">
        <h1 class="page-title">语义分割结果展示</h1>
        <div class="images-grid">
            <!-- 语义分割结果图片 -->
            <div class="image-card" onclick="showImageDetail('front.png', '正面视图')">
                <img src="front.png" alt="正面视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('front_left.png', '左前视图')">
                <img src="front_left.png" alt="左前视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('front_right.png', '右前视图')">
                <img src="front_right.png" alt="右前视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('low_front.png', '前低视图')">
                <img src="low_front.png" alt="前低视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('top_front.png', '前顶视图')">
                <img src="top_front.png" alt="前顶视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('back.png', '后视图')">
                <img src="back.png" alt="后视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('back_left.png', '左后视图')">
                <img src="back_left.png" alt="左后视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('back_right.png', '右后视图')">
                <img src="back_right.png" alt="右后视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('top_back.png', '后顶视图')">
                <img src="top_back.png" alt="后顶视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('left.png', '左视图')">
                <img src="left.png" alt="左视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('right.png', '右视图')">
                <img src="right.png" alt="右视图" class="seg-image">
            </div>
            <div class="image-card" onclick="showImageDetail('low_left.png', '左下视图')">
                <img src="low_left.png" alt="左下视图" class="seg-image">
            </div>
        </div>
        
        <button class="back-btn btn btn-secondary" style="margin: 20px auto; display: block;" onclick="showNav()">返回工具导航</button>
    </div>

    <!-- 新增：图片详情页 -->
    <div class="image-detail-container" id="imageDetailArea">
        <h1 class="page-title">语义分割图片详情</h1>
        <h3 id="detailImageTitle" class="mb-4"></h3>
        <div class="detail-image-container">
            <img id="detailImage" class="detail-image" src="" alt="">
        </div>
        <div class="mt-4">
            <button class="back-btn btn btn-secondary me-2" onclick="showSemanticSegmentation()">返回图片列表</button>
            <button class="btn btn-primary" onclick="saveCurrentImage()">保存图片</button>
        </div>
    </div>

    <!-- Yuyi页面 -->
    <div class="yuyi-container" id="yuyiArea">
        <h1 class="page-title">Yuyi 功能页面</h1>
        <div style="text-align: center; padding: 50px; background: white; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
            <p style="font-size: 1.2rem; margin-bottom: 30px;">这是Yuyi功能的主页面。</p>
            <p style="color: #666;">可以在这里添加Yuyi相关的功能和内容</p>
        </div>
        
        <button class="back-btn btn btn-secondary" style="margin: 20px auto; display: block;" onclick="showSemanticSegmentation()">返回语义分割</button>
    </div>

    <script>
        // 获取区域元素
        const navArea = document.getElementById('navArea');
        const text2ImgArea = document.getElementById('text2ImgArea');
        const modelViewerArea = document.getElementById('modelViewerArea');
        const segmentationArea = document.getElementById('segmentationArea');
        const imageDetailArea = document.getElementById('imageDetailArea');
        const yuyiArea = document.getElementById('yuyiArea');
        const loadingIndicator = document.getElementById('loadingIndicator');
        const imageGallery = document.getElementById('imageGallery');
        const statusEl = document.getElementById('statusMsg');

        // 全局变量：存储当前查看的图片信息
        let currentImageSrc = '';
        let currentImageTitle = '';
        // 3D场景相关变量
        let scene, camera, renderer, controls;
        let currentModel = null;
        let isAutoRotating = false;

        // 显示文生图功能区
        function showText2Img() {
            navArea.style.display = 'none';
            modelViewerArea.style.display = 'none';
            segmentationArea.style.display = 'none';
            imageDetailArea.style.display = 'none';
            yuyiArea.style.display = 'none';
            text2ImgArea.style.display = 'block';
            initSliderListeners();
            text2ImgArea.style.opacity = '0';
            setTimeout(() => {
                text2ImgArea.style.transition = 'opacity 0.5s ease';
                text2ImgArea.style.opacity = '1';
            }, 10);
        }

        // 显示3D模型查看器
        function showModelViewer() {
            navArea.style.display = 'none';
            text2ImgArea.style.display = 'none';
            segmentationArea.style.display = 'none';
            imageDetailArea.style.display = 'none';
            yuyiArea.style.display = 'none';
            modelViewerArea.style.display = 'block';
            modelViewerArea.style.opacity = '0';
            setTimeout(() => {
                modelViewerArea.style.transition = 'opacity 0.5s ease';
                modelViewerArea.style.opacity = '1';
                if (!window.ceshiSceneInitialized) {
                    initCeshiScene();
                    initCeshiEvents();
                    initImageUploadEvents();  // 初始化图片上传事件
                    window.ceshiSceneInitialized = true;
                }
            }, 10);
        }

        // 显示语义分割结果
        function showSemanticSegmentation() {
            navArea.style.display = 'none';
            text2ImgArea.style.display = 'none';
            modelViewerArea.style.display = 'none';
            imageDetailArea.style.display = 'none';
            yuyiArea.style.display = 'none';
            segmentationArea.style.display = 'block';
            segmentationArea.style.opacity = '0';
            setTimeout(() => {
                segmentationArea.style.transition = 'opacity 0.5s ease';
                segmentationArea.style.opacity = '1';
            }, 10);
        }

        // 新增：显示图片详情页
        function showImageDetail(imageSrc, imageTitle) {
            // 保存当前图片信息
            currentImageSrc = imageSrc;
            currentImageTitle = imageTitle;
            
            // 更新详情页内容
            document.getElementById('detailImage').src = imageSrc;
            document.getElementById('detailImageTitle').textContent = imageTitle;
            
            // 切换显示区域
            segmentationArea.style.display = 'none';
            imageDetailArea.style.display = 'block';
            imageDetailArea.style.opacity = '0';
            setTimeout(() => {
                imageDetailArea.style.transition = 'opacity 0.5s ease';
                imageDetailArea.style.opacity = '1';
            }, 10);
        }

        // 返回导航页
        function showNav() {
            text2ImgArea.style.display = 'none';
            modelViewerArea.style.display = 'none';
            segmentationArea.style.display = 'none';
            imageDetailArea.style.display = 'none';
            yuyiArea.style.display = 'none';
            navArea.style.display = 'block';
        }

        // 初始化滑块监听
        function initSliderListeners() {
            // CFG权重
            document.getElementById('cfgWeight').addEventListener('input', function() {
                document.getElementById('cfgWeightValue').textContent = `当前值：${this.value}`;
            });
            
            // 温度参数
            document.getElementById('temperature').addEventListener('input', function() {
                document.getElementById('temperatureValue').textContent = `当前值：${this.value}`;
            });
            
            // Canny低阈值
            document.getElementById('cannyLow').addEventListener('input', function() {
                document.getElementById('cannyLowValue').textContent = `当前值：${this.value}`;
            });
            
            // Canny高阈值
            document.getElementById('cannyHigh').addEventListener('input', function() {
                document.getElementById('cannyHighValue').textContent = `当前值：${this.value}`;
            });
            
            // 并行生成数量
            document.getElementById('parallelSize').addEventListener('input', function() {
                document.getElementById('parallelSizeValue').textContent = `当前值：${this.value}`;
            });
        }

        // 预览Canny图像
        function previewCannyImage(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('cannyPreview').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }

        // 显示加载状态
        function showLoading() {
            loadingIndicator.style.display = 'block';
            statusEl.value = '正在生成图像...';
        }

        // 隐藏加载状态
        function hideLoading() {
            loadingIndicator.style.display = 'none';
            statusEl.value = '生成完成';
        }

        // 生成图像（模拟）
        function generateImages() {
            const prompt = document.getElementById('promptInput').value;
            if (!prompt.trim()) {
                alert('请输入提示语');
                return;
            }

            showLoading();
            imageGallery.innerHTML = ''; // 清空现有结果

            // 模拟API请求延迟
            setTimeout(() => {
                const count = parseInt(document.getElementById('parallelSize').value);
                // 生成示例图片（实际项目中应替换为真实接口返回的图片）
                for (let i = 0; i < count; i++) {
                    const imgContainer = document.createElement('div');
                    const img = document.createElement('img');
                    // 使用随机图片服务模拟生成结果
                    img.src = `https://picsum.photos/seed/${Math.random()}/600/400`;
                    img.className = 'gallery-img';
                    img.alt = `生成结果 ${i + 1}`;
                    imgContainer.appendChild(img);
                    imageGallery.appendChild(imgContainer);
                }
                hideLoading();
            }, 2000);
        }

        // 清除输入
        function clearInputs() {
            document.getElementById('promptInput').value = '';
            document.getElementById('seedInput').value = '';
            document.getElementById('cannyImageInput').value = '';
            document.getElementById('cannyPreview').src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="%23dee2e6" viewBox="0 0 16 16"%3E%3Cpath d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"/%3E%3C/svg%3E';
            imageGallery.innerHTML = '';
            statusEl.value = '就绪';
        }

        // 保存所有图像
        function saveAllImages() {
            const images = document.querySelectorAll('.gallery-img');
            if (images.length === 0) {
                alert('没有可保存的图像');
                return;
            }

            images.forEach((img, index) => {
                const link = document.createElement('a');
                link.href = img.src;
                link.download = `生成图像_${index + 1}.png`;
                link.click();
            });
        }

        // 保存当前图像
        function saveCurrentImage() {
            if (!currentImageSrc) {
                alert('没有选中的图像');
                return;
            }

            const link = document.createElement('a');
            link.href = currentImageSrc;
            link.download = `${currentImageTitle}.png`;
            link.click();
        }

        // 初始化3D场景
        function initCeshiScene() {
            // 创建场景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000000);

            // 创建相机
            camera = new THREE.PerspectiveCamera(75, document.getElementById('ceshi-model-viewer').clientWidth / document.getElementById('ceshi-model-viewer').clientHeight, 0.1, 1000);
            camera.position.z = 5;

            // 创建渲染器
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(document.getElementById('ceshi-model-viewer').clientWidth, document.getElementById('ceshi-model-viewer').clientHeight);
            document.getElementById('ceshi-model-viewer').appendChild(renderer.domElement);

            // 添加环境光
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);

            // 添加平行光
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(5, 5, 5);
            scene.add(directionalLight);

            // 添加辅助网格
            const gridHelper = new THREE.GridHelper(10, 10, 0x333333, 0x222222);
            scene.add(gridHelper);

            // 添加控制器
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.25;
            controls.enableZoom = true;

            // 窗口大小调整
            window.addEventListener('resize', onWindowResize);

            // 动画循环
            function animate() {
                requestAnimationFrame(animate);
                if (isAutoRotating && currentModel) {
                    currentModel.rotation.y += 0.01;
                }
                controls.update();
                renderer.render(scene, camera);
            }
            animate();
        }

        // 窗口大小调整
        function onWindowResize() {
            const container = document.getElementById('ceshi-model-viewer');
            camera.aspect = container.clientWidth / container.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(container.clientWidth, container.clientHeight);
        }

        // 初始化3D场景事件
        function initCeshiEvents() {
            // 文件夹选择按钮
            document.getElementById('folder-btn').addEventListener('click', () => {
                document.getElementById('folder-input').click();
            });

            // 文件夹选择处理
            document.getElementById('folder-input').addEventListener('change', (e) => {
                const files = e.target.files;
                if (files.length > 0) {
                    showModelLoading('正在加载模型...');
                    // 模拟加载延迟
                    setTimeout(() => {
                        const modelList = document.getElementById('model-list');
                        modelList.innerHTML = '';
                        
                        // 过滤出模型文件
                        const modelFiles = Array.from(files).filter(file => 
                            file.name.toLowerCase().endsWith('.obj') || 
                            file.name.toLowerCase().endsWith('.gltf') || 
                            file.name.toLowerCase().endsWith('.glb')
                        );

                        if (modelFiles.length > 0) {
                            modelFiles.forEach(file => {
                                const modelItem = createModelItem(file);
                                modelList.appendChild(modelItem);
                            });
                        } else {
                            modelList.innerHTML = '<div class="ceshi-no-models">未找到支持的模型文件</div>';
                        }
                        hideModelLoading();
                    }, 1500);
                }
            });

            // 重置视图
            document.getElementById('reset-view').addEventListener('click', () => {
                if (controls) {
                    controls.reset();
                    camera.position.set(0, 2, 5);
                }
            });

            // 切换自动旋转
            document.getElementById('toggle-rotate').addEventListener('click', () => {
                isAutoRotating = !isAutoRotating;
            });

            // 显示模型信息
            document.getElementById('model-info').addEventListener('click', () => {
                document.getElementById('info-panel').style.display = 'block';
            });

            // 关闭模型信息
            document.getElementById('close-info').addEventListener('click', () => {
                document.getElementById('info-panel').style.display = 'none';
            });
        }

        // 初始化图片上传事件
        function initImageUploadEvents() {
            // 图片上传按钮
            document.getElementById('image-upload-btn').addEventListener('click', () => {
                document.getElementById('image-upload-input').click();
            });

            // 图片预览
            document.getElementById('image-upload-input').addEventListener('change', (e) => {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById('uploaded-image-preview').src = e.target.result;
                        document.getElementById('image-preview-container').style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                }
            });

            // 生成3D模型按钮
            document.getElementById('generate-3d-btn').addEventListener('click', () => {
                showModelLoading('正在生成3D模型...');
                
                // 模拟生成延迟
                setTimeout(() => {
                    hideModelLoading();
                    // 模拟生成的模型
                    const modelList = document.getElementById('model-list');
                    modelList.innerHTML = '';
                    
                    const mockModel = {
                        name: '生成的3D模型',
                        type: 'glb',
                        size: '1.2MB'
                    };

                    const modelItem = document.createElement('div');
                    modelItem.className = 'ceshi-model-item active';
                    modelItem.innerHTML = `
                        <div class="ceshi-model-icon">
                            <i class="fa fa-cube" style="color: #4a90e2;"></i>
                        </div>
                        <div class="ceshi-model-info">
                            <div class="ceshi-model-name">${mockModel.name}</div>
                            <div class="ceshi-model-type">${mockModel.type.toUpperCase()} · ${mockModel.size}</div>
                        </div>
                    `;
                    
                    modelItem.addEventListener('click', () => {
                        loadSampleModel();
                        document.getElementById('model-details').innerHTML = `
                            <p><strong>名称:</strong> ${mockModel.name}</p>
                            <p><strong>格式:</strong> ${mockModel.type.toUpperCase()}</p>
                            <p><strong>大小:</strong> ${mockModel.size}</p>
                            <p><strong>状态:</strong> 生成成功</p>
                        `;
                    });
                    
                    modelList.appendChild(modelItem);
                    // 自动加载生成的模型
                    loadSampleModel();
                    document.getElementById('model-details').innerHTML = `
                        <p><strong>名称:</strong> ${mockModel.name}</p>
                        <p><strong>格式:</strong> ${mockModel.type.toUpperCase()}</p>
                        <p><strong>大小:</strong> ${mockModel.size}</p>
                        <p><strong>状态:</strong> 生成成功</p>
                    `;
                }, 3000);
            });
        }

        // 创建模型列表项
        function createModelItem(file) {
            const modelItem = document.createElement('div');
            modelItem.className = 'ceshi-model-item';
            
            // 获取文件类型和大小
            const ext = file.name.split('.').pop().toLowerCase();
            const size = (file.size / (1024 * 1024)).toFixed(2);
            
            modelItem.innerHTML = `
                <div class="ceshi-model-icon">
                    <i class="fa fa-cube" style="color: #4a90e2;"></i>
                </div>
                <div class="ceshi-model-info">
                    <div class="ceshi-model-name">${file.name}</div>
                    <div class="ceshi-model-type">${ext.toUpperCase()} · ${size}MB</div>
                </div>
            `;
            
            // 点击加载模型
            modelItem.addEventListener('click', () => {
                // 移除其他项的active类
                document.querySelectorAll('.ceshi-model-item').forEach(item => {
                    item.classList.remove('active');
                });
                // 添加当前项的active类
                modelItem.classList.add('active');
                
                // 显示模型信息
                document.getElementById('model-details').innerHTML = `
                    <p><strong>名称:</strong> ${file.name}</p>
                    <p><strong>格式:</strong> ${ext.toUpperCase()}</p>
                    <p><strong>大小:</strong> ${size}MB</p>
                `;
                
                // 加载模型（这里使用示例模型，实际应加载选中的文件）
                loadSampleModel();
            });
            
            return modelItem;
        }

        // 加载示例模型（实际项目中应替换为加载用户选择的模型）
        function loadSampleModel() {
            // 清除当前模型
            if (currentModel) {
                scene.remove(currentModel);
            }

            showModelLoading('正在加载模型...');
            
            // 使用GLTF加载器加载示例模型
            const loader = new THREE.GLTFLoader();
            // 加载Three.js提供的示例模型
            loader.load(
                'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
                (gltf) => {
                    currentModel = gltf.scene;
                    
                    // 调整模型大小和位置
                    currentModel.scale.set(2, 2, 2);
                    currentModel.position.set(0, 0, 0);
                    
                    scene.add(currentModel);
                    hideModelLoading();
                },
                (xhr) => {
                    const percent = (xhr.loaded / xhr.total) * 100;
                    document.getElementById('loading-text').textContent = `加载中: ${percent.toFixed(0)}%`;
                },
                (error) => {
                    console.error('模型加载错误:', error);
                    hideModelLoading();
                    alert('模型加载失败');
                }
            );
        }

        // 显示模型加载状态
        function showModelLoading(text) {
            document.getElementById('loading').style.display = 'block';
            document.getElementById('loading-text').textContent = text || '加载中...';
        }

        // 隐藏模型加载状态
        function hideModelLoading() {
            document.getElementById('loading').style.display = 'none';
        }
    </script>
</body>
</html>